<template>
  <div id="analysisReport" v-loading.body='loading' element-loading-text="拼命加载中" style="padding-left: 14%;
  padding-right: 14%;">
    <div class="head">
      <div class="reporttitle">
          {{report.conclusion.analysis_title}}
      </div>
      <div class="reportopera">
        <div class="time">
          <span>
            创建时间：{{report.conclusion.analysis_end_time}}
          </span>
          &nbsp; &nbsp;
          <span>
            创建人:{{report.conclusion.r_person}}
          </span>
        </div>
        <div class="downpdf" >
          <at-button v-show='download' type="primary" @click='exportPdf'><i class="saas-icon-res-down" style="font-size:20px;vertical-align: middle;"></i>PDF下载</at-button>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="publicStyle">
        <div class="title">
            分析结论
        </div>
        <div class="summary">
          <table class="natable"  width='100%'>
            <tr>
              <td class="tdtype" >是否为风险事项</td>
              <td width='400px' >{{report.conclusion.is_risk_event}}</td>
              <td class="tdtype" v-if = "report.conclusion.is_risk_event=='是'">分析依据</td>
              <td width='400px' v-if = "report.conclusion.is_risk_event=='是'">
              <span @click = 'downloadbasis(report.conclusion.analysis_basis)' :style="report.conclusion.analysis_basis=='-'?'':'cursor:pointer;color: #1f92ef'">
              {{report.conclusion.analysis_basis.split('/')[report.conclusion.analysis_basis.split('/').length-1]}}
              </span>  
              </td>
            </tr>
            <tr v-if = "report.conclusion.is_risk_event=='是'">
              <td class="tdtype" >风险事项名称</td>
              <td width='400px' >{{report.basicinfo.risk_event_name}}</td>
              <td class="tdtype" >风险事项等级</td>
              <td width='400px' >{{report.basicinfo.risk_event_level}}</td>
            </tr>
            <tr v-if = "report.conclusion.is_risk_event=='是'">
              <td class="tdtype">风险事项类型</td>
              <td width='400px'>{{report.basicinfo.risk_event_type}}</td>
              <td class="tdtype" >风险事项描述</td>
              <td width='400px' style="padding-right: 20px;">{{report.basicinfo.risk_event_content}}</td>
            </tr>
            <tr >
                <td  class="tdtype" v-if = "report.conclusion.is_risk_event=='是'">解决方案</td>
                <td  v-if = "report.conclusion.is_risk_event=='是'" style="padding-top:10px;padding-bottom:10px" width='400px'>{{report.conclusion.solution}}</td>
                <td class="tdtype" >备注</td>
                <td  style="padding-top:10px;padding-bottom:10px" width='400px' >{{report.conclusion.remark}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="publicStyle" >
        <div class="title">
            关键风险
        </div>
        <div class="summary">
          <span class="lowtitle">基本要素</span>
          <div style="border-bottom: 1px solid #eee;">
            <div class="element" v-for='(item,index) in report.element'>
              <at-tooltip :content="item.element_name" :disabled='item.element_name.length<40' placement="top-start">      
                <div style="text-overflow: ellipsis;overflow: hidden;">
                    {{item.element_name}}
                </div>
              </at-tooltip>
            </div>
          </div>  
        </div>
        <div class="summary" :style="report.related.length==0?'border-bottom:none':'border-bottom:1px solid #eee'">
          <span class="lowtitle">影响范围</span>
          <table class="natable"  width='100%'>
            <tr valign="text-top">
              <td width='400px' style="padding-left: 9.5%;">
                <at-collapse accordion v-model='activeNames'>
                  <at-collapse-item name="1">
                    <template slot="title">
                      实际影响机构数量<span v-html="report.effect.effect_agency=='-'?'0个':report.effect.effect_agency.split(',').length+'个'"></span>，
                      影响系统数量<span v-html="report.effect.effect_info_sys=='-'?'0个':report.effect.effect_info_sys.split(',').length+'个'"></span>，
                      影响节点数量<span v-html="report.effect.effect_sys_node=='-'?'0个':report.effect.effect_sys_node.split(',').length+'个'"></span>
                    </template>
                    <div class="test">
                      <span>
                          影响机构：{{report.effect.effect_agency}}
                      </span>
                    </div>
                    <div class="test">
                      <span >
                         影响系统： {{report.effect.effect_info_sys}}
                      </span>
                    </div>
                    <div class="test">
                      <span>
                          影响节点：{{report.effect.effect_sys_node}}
                      </span>
                    </div>
                  </at-collapse-item>
                </at-collapse>
              </td>
            </tr>
          </table>
        </div>
        <div class="summary"  v-show='report.related.length>0'>
          <span class="lowtitle">相关风险</span>
          <table class="natable"  width='100%' style='border-bottom:none' v-for= '(item,index) in report.related' :key='index'>
            <tr>
              <td class="tdtype" >事项名称</td>
              <td width='400px' colspan='3'>     
                {{item.risk_event_name}}
              </td>
            </tr>
            <tr>
              <td class="tdtype" >事项等级</td>
              <td width='400px' >     
                {{item.risk_event_level}}
              </td>
              <td class="tdtype" >事项类型</td>
              <td width='400px' >  
                {{item.risk_event_type}}            
              </td>
            </tr>
            <tr>
              <td class="tdtype" >事项描述</td>
              <td width='400px' colspan='3'>
                  {{item.risk_event_content}}    
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="publicStyle">
        <div class="title" style="position:relative">
            附录
          <!-- <at-button type="primary" style="position: absolute;right: 20px;top: 10px;"><i class="saas-icon-res-down" style="font-size:20px;vertical-align: middle;"></i>下载</at-button> -->
        </div>
        <div style="padding: 20px">
          <at-table class="logtable" style="width:100%;" :data="report.appendix" :show-header="true" :border="false">
            <at-table-column label="发生时间" prop="ts" width='160px'>
            </at-table-column>
            <at-table-column label="系统名称" prop="sys_name" width='150px'>
            </at-table-column>
            <at-table-column label="严重级别"  prop="log_level" width='100px'>
            <template v-slot="scope">
                <span :class="['risklevel',scope.row.log_level == '低 危' ? 'LowRisk' : scope.row.log_level == '中 危' ? 'MiddleRisk' : scope.row.log_level == '高 危' ? 'HighRisk' : 'SeriousRisk']">
                    {{scope.row.log_level}}
                </span>  
              </template>
            </at-table-column>
            <at-table-column label="描述" show-overflow-tooltip  prop="describes" min-width='400px'>
            </at-table-column>
            <at-table-column label="日志类型"  prop="log_type" width='170px'>
            </at-table-column>			
          </at-table>
          <div style="text-align: center;margin-top: 20px;">
            <at-button v-show = 'button&&report.appendix.length>=10' @click='loadmore'>{{buttonName}}</at-button>
          </div>
        </div>   
      </div>   
    </div>
  </div>
</template>
<script>
  import { downloadpdf } from '../../../utils/downloadpdf'
  import { reportdata } from './js/mixin'
  import { setData } from '../../../components/eventdetail/js/mixinmethods'
  import { mapState } from 'vuex'
  export default {
    name: 'analysisReport',
    mixins: [reportdata, setData],
    data () {
      return {
        download: true,
        activeNames: '0',
        buttonName: '加载全部',
        button: true
      }
    },
    mounted () {
      this.$store.dispatch('/event/analysisReport', { eventId: this.$route.query.row, analysisId: this.$route.query.analyzeId, fun: this.storageData, limit: 10 })
    },
    computed: {
      ...mapState({
      // loading加载
        loading: state => state.eventManagement.loading
      })
    },
    methods: {
      downloadbasis (par) {
        if (par === '-') {
          return ''
        } else {
          this.$store.dispatch('/event/analysisdownload', { path: par })
        }
      },
      exportPdf () {
        this.activeNames = '1'
        this.$store.dispatch('/event/analysisReport', { eventId: this.$route.query.row, analysisId: this.$route.query.analyzeId, fun: this.storageData, limit: 999 })
        this.$store.commit('/event/changeLoading')
        setTimeout(() => {
          downloadpdf(this, '#analysisReport')
        }, 200)
      },
      loadmore () {
        if (this.buttonName === '加载全部') {
          this.$store.dispatch('/event/analysisReport', { eventId: this.$route.query.row, analysisId: this.$route.query.analyzeId, fun: this.storageData, limit: 999 })
          this.buttonName = '收起'
        } else {
          this.$store.dispatch('/event/analysisReport', { eventId: this.$route.query.row, analysisId: this.$route.query.analyzeId, fun: this.storageData, limit: 10 })
          this.buttonName = '加载全部'
        }
      }
    }
  }
</script> 
<style lang="less">
  @import './style/report.less';
</style>
<!-- 修改at-element组件样式 -->
<style> 
#analysisReport .at-collapse-wall .at-collapse{
  width: 100% !important;
  min-height: 0 !important;
  border: none !important;
}
#analysisReport .at-collapse .item__header_wall{
  border-bottom: none !important;
  width: 100% !important;
  margin: none !important;
}
#analysisReport .at-collapse .at-collapse-item-content {
  margin: 0 !important;
  border-bottom:none !important;
}
#analysisReport .at-collapse .collapse-item-more {
  display: none !important;
}
.logtable .at-table__body-wrapper{
  	overflow: hidden !important;
}
.logtable .at-table__row {
  cursor: default !important;
}
.logtable .at-table__row .at-tooltip{
  cursor: pointer !important;
}
</style>